<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            height: 50px;
            background: #eee;
            margin-top: 10px;
            line-height: 50px;
        }
        .box1 p{
            margin-left: 150px;
        }
        #box2{
            width: 80px;
            height: 50px;
            background: #eee;
            margin-top: -50px;
            margin-left: 1380px;
            float: bottom;
            position: absolute;
            cursor: pointer;
            position: relative;

        }
        #box2 p{
            margin-left: 7px;
            background: url("img/jiantou.png")no-repeat 64px center;
        }
        .box3{
            width: 80px;
            background: #9e9e9f;
            float: bottom;
            margin-left: 1380px;
            font-size: 17px;
            list-style-type: none;
            display: none;
            position: absolute;
        }
        #banner{
            width: 790px;
            height: 340px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;

        }
        #banner ul{
            list-style-type: none;
        }
        #banner .circle{
            width: 100px;
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -50px;
            height: 20px;
            border-radius: 10px;
            overflow: hidden;
            padding-left: 5px;
        }
        #banner .circle span{
            width: 20px;
            height: 20px;
            display: block;
            float: left;
            background: white;
            border-radius: 50%;
            margin-right: 5px;
            text-align: center;
            line-height: 20px;
            color: #f60;
            font-size: 14px;
            cursor: pointer;
        }
        #banner .circle span.active{
            background: #f60;
            color: white;
        }
        #banner .prev,#banner .next{
            width: 30px;
            height: 60px;
            background: white;
            color: #000;
            text-align: center;
            line-height: 60px;
            position: absolute;
            top: 50%;
            margin-top: -30px;
            cursor: pointer;
            display: none;
        }
        #banner .prev{
            left: 30px;
        }
        #banner .next{
            right: 30px;
        }

        .box5{
            height: 140px;
            margin-top: 200px;
            color: black;
            cursor: pointer;
        }
        .box5 li{
            font-size: 10px;
            list-style-type: none;
            margin-top: 10px;
            margin-left: 30px;
        }
        .box5 li.we{
            margin-top: 50px;
        }
        .box6{
            width: 278px;
            height: 300px;
            border: 1px solid black;
            margin-left: 400px;
        }
        .box6 img{
            margin-top: 10px;
            margin-left: 20px;
        }
        .box6 p{
            margin-left: 100px;
        }
        .box7{
            width: 278px;
            height: 300px;
            border: 1px solid black;
            margin-left: 900px;
            margin-top: -300px;
        }
        .box7 img{
            margin-top: 10px;
            margin-left: 20px;
        }
        .box7 p{
            margin-left: 100px;
        }
    </style>
</head>
<body>
<div class="box1">
    <p>亲，请登录　免费注册　手机逛淘宝
    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
我的淘宝　购物车　收藏夹　商品分类　卖家中心　联系客服
</p>
    <div id="box2">
        <p>个人中心</p>
    </div>
</div>
<div class="box3">
    <li><a href="">我的淘宝</a></li>
    <li><a href="">我的淘宝</a></li>
    <li><a href="">我的淘宝</a></li>
    <li><a href="">我的淘宝</a></li>
    <li><a href="">我的淘宝</a></li>
    <li><a href="">我的淘宝</a></li>
</div>
<div id="banner">
    <ul>
        <li><img src="img/5a4ee1dcN8e4f3ebe.jpg" alt=""></li>
        <li><img src="img/5a4f1b1cNf6ed1705.jpg" alt=""></li>
        <li><img src="img/5a4f2e31N835fc4c7.jpg" alt=""></li>
        <li><img src="img/5a4f3cb7N31ea0118.jpg" alt=""></li>
    </ul>
    <div class="circle">
        <span class="active">1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <span class="prev">&lt;</span>
    <span class="next">&gt;</span>
</div>
<div class="box6">
    <img src="img/1111.png" alt="">
    <p>白炽灯</p>
</div>
<div class="box7">
    <img src="img/1111.png" alt="">
    <p>白炽灯</p>
</div>
<div class="box5">
    <li>阿里巴巴集团　|　淘宝网　|　天猫　|　聚划算　|　全球速卖通　|　阿里巴巴国际交易市场　|　1688　|　阿里妈妈　|　阿里旅行 · 去啊　|　阿里云计算　|　YunOS　|　阿里通信　|　一淘　|　万网　|　高德　|　UC　|　友盟　|　
        虾米　|　天天动听　|　来往　|　钉钉　|　支付宝</li>
    <li class="we">关于淘宝　合作伙伴　营销中心　廉正举报　联系客服　开放平台　诚征英才　联系我们　网站地图　法律声明　　　© 2003-2016 Taobao.com 版权所有
        网络文化经营许可证：浙网文[2013]0268-027号|增值电信业务经营许可证：浙B2-20080224-1|信息网络传播视听节目许可证：1109364号| 互联网违法和不良信息举报电话:0571-81683755 blxx@list.alibaba-inc.com</li>
</div>

</body>
</html>
<script src="js/jquery-1.10.1.js"></script>
<script>
    $(function () {
        $("#box2").hover(function () {
            $(".box3").show();
        },function () {
            $(".box3").hide();
        })
    })
    $(function () {
        $("#banner").hover(function () {
            $("#banner .prev,#banner .next").fadeIn();
            clearInterval(timer);
        },function () {
            $("#banner .prev,#banner .next").fadeOut();
            timer = setInterval(lunbo,5000);
        });
        function silder(index) {
            $(".circle span").eq(index).addClass("active").siblings().removeClass("active");
            $("#banner ul li").eq(index).fadeIn().siblings().fadeOut();
        }
        var _index = 0;
        var timer = null;
        $(".circle span").mouseover(function () {
            _index = $(this).index();
            silder(_index);
        })
        function lunbo() {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        }
        timer = setInterval(lunbo,5000);
        $("#banner .next").click(function () {
            if(_index == 3){
                _index = 0;
            }else{
                _index++;
            }
            silder(_index);
        })
        $("#banner .prev").click(function () {
            if(_index == 0){
                _index = 3;
            }else{
                _index--;
            }
            silder(_index);
        })
    })
</script>